// 专门处理权限路由的模块
import { constantRoutes, asyncRoutes } from '@/router/index.js' // 静态路由  就是都能跳转到的那些默认模块 什么首页啊登录啊404啊之类
export default {
  namespaced: true,

  state: {
    routes: constantRoutes // 路由表 表示当前用户所拥有所有路由的数组
  },

  mutations: {
    setRoutes(sta, newRoutes) {
      sta.routes = [...constantRoutes, ...newRoutes]
    }
  },

  actions: {
    // 筛选权限路由 第二个参数为当前用户所拥有的权限 就是从userinfo中的menus规定好了哪个用户拥有哪些路由权限
    // menus:['settings','permissions'..]
    filterRoutes(context, menus) {
      console.log(menus)
      const arrRoute = []
      menus.forEach(key => {
        // 筛选出 动态路由模块 与menus中 对的上的路由
        // asyncRoutes:[{path:'settings',name:'settings'},{},{}]
        var arr = asyncRoutes.filter(item => {
          // console.log(item)
          return item.name === key
        }) // asyncRoutes所有的动态路由 是一个数组 filter 如果有符号条件的数组元素 就会返回到新数组中
        arrRoute.push(...arr) // arrRoute是一个数组 所有不能直接push 例如 [1,2,3].push[4.5.6] 其结果并不是我们需要的[1,2,3,4,5,6]
      })
      // 现在得到的arr就是当前用户的所拥有的  动态路由的权限
      // 然后就是将现在的动态路由权限和静态路由权限合并 state中的用户路由表才真正算是完整了
      context.commit('setRoutes', arrRoute)
      return arrRoute // 这里为什么还要return  state数据 是用来 显示左侧菜单用的  return  是给路由addRoutes用的
    }
  }
}
